<template>
  <div class="index">
    <div class="policy-mian">
        <div class="policy-mian-top">
            <div class="title">匹配结果</div>
            <!-- <div class="p1">已匹配政策：《成都市锦江区实施“锦遇良才” 行动计划的若干政策》</div> -->
        </div>
        <div class="wrap">
           <div class="list">
               <div class="title">咨询申报</div>
               <div class="p" v-for="(item,index) in list" :key="index" @click="togNav('/policy/details?id='+item.id)">{{item.title}}</div>
           </div>
           <form class="form">
               <div class="form-div">
                   <div class="form-div-input" v-if="(identity=='q')">
                       <div class="upload-div flex-ali">
                           <el-upload
                                class="avatar-uploader"
                                action="http://localhost/api-file/files-anon"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <div class="upload-div-p"><p>营业执照上传</p><p>不大于800KB</p><p>支持jpg/bmp/png格式</p></div>
                       </div>
                       
                   </div>
                   <div class="form-div-input">
                       <input type="tel" name="tel" v-model="tel" placeholder="联系方式"/>
                   </div>
                   <div class="form-div-input" v-if="(identity=='q')">
                       <input type="number" name="capital" v-model="capital" placeholder="注册资金"/>
                   </div>
                   <div class="form-div-input" v-if="(identity=='q')">
                       <el-date-picker
                        style="background-color: #F9F9F9"
                        v-model="datec"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                   </div>
                   
                   <div class="form-div-input">
                       <textarea type="text" name="content" v-model="content" placeholder="咨询内容"/>
                   </div>
                   <div class="p">咨询电话：13313881868</div>
               </div>
           </form>
           <div class="btn" @click="submit">提交</div>
        </div>
    </div>
  </div>
</template>
<script>
import '@/assets/styles/policy-public.scss' // iboot css
import {matchPolicy,applyPolicy} from '@/api/service/service'
import { getToken } from '@/utils/auth'
import { Notification, MessageBox, Message } from 'element-ui'
export default {
  name: "index",
  data() {
    return {
        questionItemIds:"",
        imageUrl:'',                //营业执照
        list:[],
        tel:"",
        content:"",
        capital:'',                  //注册资金
        datec:"",                    //时间
        cateId:'',              //政策id 
        identity:'',                //获取企业或个人   
        policyIds:"",
        aid:''
    }
  },
  created() {
    // this.cityId = this.getQueryString("cityId");
    // this.districtId = this.getQueryString("districtId");
    this.cateId = this.getQueryString("cateId");
    this.questionItemIds = this.getQueryString("questionItemIds");
    this.identity = this.getQueryString("identity");
    this.apipost1();
  },
  mounted(){
    
  },
  methods:{
      togNav(e){
        this.$router.push(e)
    },
    getQueryString (name) { 
      let reg = `(^|&)${name}=([^&]*)(&|$)`
      let r = window.location.search.substr(1).match(reg); 
      if (r != null) return unescape(r[2]); return null; 
    },
    //验证手机号码
    isPhoneNum(str) {
        return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)
    },
    apipost1(){
        matchPolicy({
            questionItemIds:this.questionItemIds
            // cityId:this.getQueryString("cityId"),
            // districtId:this.getQueryString("districtId"),
            // cateId:this.getQueryString("cateId")
        }).then(res => {
            this.list = res.datas;
        }).catch(err => {
            console.log(err)
        });
      },
      /**
       * 提交表单
       */
      apipost2(){
        applyPolicy({
            policyIds:this.policyIds,
            phone:this.tel,
            content:this.content,
            businessImg:this.imageUrl,
            foundTime:this.datec,
            registerCapital:this.capital
        }).then(res => {
            if(res.resp_code === 0){
                this.centent = "";
                this.tel = "";
                Message({
                    message: "提交成功",
                    type: 'success'
                })
                this.$router.push({path:'/policy'})
            }else{
                Message({
                    message: res.resp_msg,
                    type: 'error'
                })
            }
            // this.list = res.datas;
        }).catch(err => {
            console.log(err)
        });
      },
      //提交表单
      submit(){
        if(!this.aid && this.identity == 'q'){
            Message({
                message: "请上传营业执照",
                type: 'error'
            })
            return;
          }
          if(!this.tel){
            Message({
                message: "手机号不能为空！",
                type: 'error'
            })
            return; 
          }
          if(!this.isPhoneNum(this.tel)){
                Message({
                    message: "请输入正确手机号码！",
                    type: 'error'
                })
                return;
            }
          if(!this.capital && this.identity == 'q'){
            Message({
                message: "请填写注册资金",
                type: 'error'
            })
            return;
          }
          if(!this.datec && this.identity == 'q'){
            Message({
                message: "请选择日期",
                type: 'error'
            })
            return;
          }
          
          if(!this.content){
            Message({
                message: "咨询内容不能为空！",
                type: 'error'
            })
            return; 
          }
          
            let policyIds = "";
            if(this.list){
                for(let i=0; i<this.list.length; i++){
                    if(i==0){
                        policyIds = this.list[i].id
                    }else{
                        policyIds = ','+this.list[i].id
                    }
                }
            }
            this.policyIds = policyIds;
            this.apipost2()
      },

      handleAvatarSuccess(res, file) {
          //this.req.attachmentId = res.id;
          this.aid = res.id;
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isBMP = file.type === 'image/bmp';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (isJPG || isPNG || isBMP) {
          
        }else{
            this.$message.error('上传头像图片只能是 jpg/gif/bmp/png格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG || isPNG || isBMP || isLt2M;
      },
  },
  
}
</script>
<style scoped>
.list {
 background: #fff;
 box-shadow: 0px 2px 5px 1px rgba(43, 111, 141, 0.18);
border-radius: 6px;
    padding: 0 25px 1px 25px;
}
.list .title{
    line-height: 74px;
    height: 74px;
    position: relative;
    padding-left: 13px;
    font-size: 18px;
    color: #333;
}
.list .p{
    font-size: 16px;
    color: #333;
    line-height: 160%;
    padding: 10px 0 10px 13px;
    cursor:pointer;
}
.list .title::after{
    content: " ";
    position:absolute;
    left: 0;
    top: 28px;
    width: 5px;
    height: 18px;
    background: #3DABC4;
    border-radius: 3px;
}
.form{
    padding-top: 10px;
}
textarea{outline: none;}
.form .form-div{ 
    border-radius: 6px;
    box-shadow: 0px 2px 5px 1px rgba(43, 111, 141, 0.18);
    background: #fff;
    padding: 15px;
}
.form .form-div .form-div-input input{
    display: block;
    width: calc(100%);
    padding: 0 10px;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid #BBBBBB;
    background: #F9F9F9;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
}
.form .form-div .form-div-input textarea{
    width: 100%;
    height: 170px;
    padding: 10px;
    box-sizing: border-box;
    background: #F9F9F9;
    border: 1px solid #BBBBBB;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 28px;
}
.form .form-div .p{
    color: #777777;
    font-size: 16px;
    padding-bottom: 10px;
    text-align: center;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 100%;
    margin-bottom: 10px;
}
.upload-div{
    margin-bottom: 10px;
}
.upload-div .upload-div-p{
    color: #999;
    font-size: 14px;
    line-height: 21px;
    padding-left: 26px;
}
.avatar-uploader{
    width: 120px;
    height: 100px;
    line-height: 98px;
    text-align: center;
    font-size: 60px;
    background: #F9F9F9;
    border: 1px solid #BBBBBB;
}
.avatar-uploader img{
    width: 120px;
    height: 100px;
}
.btn{
    width: 322px;
    height: 42px;
    background: #3EACC4;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    line-height: 42px;
    margin: 60px auto;
}
</style>
<style>
.el-input--medium .el-input__inner{
    border: 1px solid #BBBBBB;
     background-color: #F9F9F9
}
</style>